<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <style>
        .addBrand-container {
            margin: 30px;
            background: #fff;
            min-height: 500px;
        }

        .addBrand-container .address .el-form-item__content {
            width: 400px !important;
            margin-left: 50px !important;
        }

    </style>
</head>
<body>
<div class="addBrand-container" style="right: auto" id="shop-add-app">
    <div style="display: flex; justify-content: flex-start">
        <iframe :src="'baidumap.html'" style="height: 700px; width: 1000px;margin-left: 40px; margin-top: 30px; border: none;"></iframe>
        <div class="container">
            <el-form
                    ref="ruleForm"
                    :model="ruleForm"
                    :rules="rules"
                    :inline="false"
                    label-width="100px"
                    class="shop-ruleForm"
            >
                <!-- 店名 -->
                <el-form-item label="店名:">
                    <el-input v-model="ruleForm.name" placeholder="请输入店名"/>
                </el-form-item>

                <!-- 经度 -->
                <el-form-item label="经度:">
                    <el-input v-model="ruleForm.lng" placeholder="请输入经度"/>
                </el-form-item>

                <!-- 纬度 -->
                <el-form-item label="纬度:">
                    <el-input v-model="ruleForm.lat" placeholder="请输入纬度"/>
                </el-form-item>

                <!-- 地址简称 -->
                <el-form-item label="地址简称:">
                    <el-input v-model="ruleForm.locationName" placeholder="请输入地址简称"/>
                </el-form-item>

                <!-- 省份 -->
                <el-form-item label="省份:">
                    <el-input v-model="ruleForm.provinceName" placeholder="请输入省份"/>
                </el-form-item>

                <!-- 城市 -->
                <el-form-item label="城市:">
                    <el-input v-model="ruleForm.cityName" placeholder="请输入城市"/>
                </el-form-item>

                <!-- 区域 -->
                <el-form-item label="区域:">
                    <el-input v-model="ruleForm.districtName" placeholder="请输入区域"/>
                </el-form-item>

                <!-- 详细地址 -->
                <el-form-item label="详细地址:">
                    <el-input v-model="ruleForm.detail" placeholder="请输入详细地址"/>
                </el-form-item>

                <!-- 手机号 -->
                <el-form-item label="手机号:">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号"/>
                </el-form-item>

                <!-- 联系人 -->
                <el-form-item label="联系人:">
                    <el-input v-model="ruleForm.contactName" placeholder="请输入联系人"/>
                </el-form-item>

                <!-- 店铺状态 -->
                <el-form-item label="状态:">
                    <el-select v-model="ruleForm.status" placeholder="请选择状态">
                        <el-option label="准备营业" value="0"></el-option>
                        <el-option label="正常营业" value="1"></el-option>
                        <el-option label="暂停营业" value="2"></el-option>
                        <el-option label="已关闭" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <div class="subBox address">
                    <el-form-item>
                        <el-button @click="goBack()">
                            取消
                        </el-button>
                        <el-button
                                type="primary"
                                @click="submitForm('ruleForm', false)"
                        >
                            保存
                        </el-button>
                        <el-button
                                v-if="actionType == 'add'"
                                type="primary"
                                class="continue"
                                @click="submitForm('ruleForm', true)"
                        >
                            保存并继续添加
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/shop.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#shop-add-app',
        data() {
            return {
                id: '',
                actionType: '',
                ruleForm: {
                    'name': '',
                    'lng': '',
                    'lat': '',
                    'locationName': '',
                    'provinceName': '',
                    'cityName': '',
                    'districtName': '',
                    'detail': '',
                    'phone': '',
                    'contactName': '',
                    'status': 0
                }
            }
        },
        computed: {
            rules() {
                return {
                    //姓名
                    name: [{required: true, 'validator': checkShopName, 'trigger': 'blur'}],
                    'lng': [{required: true, 'validator': checkLongitude, 'trigger': 'blur'}],
                    'lat': [{required: true, 'validator': checkLatitude, 'trigger': 'blur'}],
                    'phone': [{'required': true, 'validator': checkPhone, 'trigger': 'blur'}],
                    'contactName': [{'required': true, 'validator': checkName, 'trigger': 'blur'}]
                }
            }
        },
        created() {
            this.id = requestUrlParam('id')
            this.actionType = this.id ? 'edit' : 'add'
            if (this.id) {
                this.init()
            }
        },
        mounted() {
            var self = this;
            window.addEventListener('message', function(event) {
                // 收到从iframe传递过来的消息
                const receivedValue = event.data;
                var point = receivedValue.point;
                var addComp = receivedValue.addComp;
                // 更新Vue组件中的数据
                self.ruleForm.lng = point.lng;
                self.ruleForm.lat = point.lat;
                self.ruleForm.provinceName = addComp.province;
                self.ruleForm.cityName = addComp.city;
                self.ruleForm.districtName = addComp.district;
                var locationName = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                var detail = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                self.ruleForm.detail = detail;
                self.ruleForm.locationName = locationName;
            });
        },
        methods: {
            async init() {
                queryShopById(this.id).then(res => {
                    console.log(res)
                    if (String(res.code) === '1') {
                        console.log(res.data)
                        this.ruleForm = res.data
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            submitForm(formName, st) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.actionType === 'add') {
                            const params = {
                                ...this.ruleForm
                            }
                            addShop(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('店铺添加成功！')
                                    if (!st) {
                                        this.goBack()
                                    } else {
                                        this.ruleForm = {
                                            'name': '',
                                            'lng': '',
                                            'lat': '',
                                            'locationName': '',
                                            'provinceName': '',
                                            'cityName': '',
                                            'districtName': '',
                                            'detail': '',
                                            'phone': '',
                                            'contactName': ''
                                        }
                                    }
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        } else {
                            const params = {
                                ...this.ruleForm
                            }
                            editShop(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('店铺信息修改成功！')
                                    this.goBack()
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            goBack() {
                window.parent.menuHandle({
                    id: '1',
                    url: '/backend/page/shop/list.html',
                    name: '店铺管理'
                }, false)
            }
        }
    })
</script>
</body>
</html>
